<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式动态绑定</title>
    <script src="../js/common/vue/vue.js"></script>

</head>
<body>
<div id="app">
    <h3>a={{a}}</h3><br>
    <h3>b={{b}}</h3><br>
    <h2>c= {{c}}</h2> <br>
    <h2>f= {{f}}</h2> <br>
    <button v-on:click="addB">b+</button>
    <button v-on:click="subtractioB()">b-</button>
    <h2>我只是改变了b的值bin没有调用什么方法重新计划c的值，c就自己刷新了，这就是 computed 属性的作用</h2>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            a: 10,
            b: 0
        },
        methods: {
            addB() {
                this.b = this.b + 1;
            },
            subtractioB() {
                this.b = this.b - 1;
            }
        },
        // computed  computed比较适合对多个变量或者对象进行处理后返回一个结果值，
        // 也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化.
        computed: {
            //默认有 set 和 get方法 一般只实现其get方法。
            c: {
                set: function () {
                },
                get: function () {
                    return this.a + this.b;
                }
            },
            f :function() {
                //如果只是实现 get方法可以简写成这样。
                return this.a + this.b;
            }

        }
    })
</script>
</body>
</html>